<!--
 * @Author: your name
 * @Date: 2021-12-29 21:52:08
 * @LastEditTime: 2022-01-05 19:45:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE 
 * @FilePath: \am-ui\src\pages\am\monitor\History.vue
-->
<template>
  <div class="history">
    <div class="content">
      <div class="left">
        <el-input
          v-model="filterText"
          placeholder="请输入工程关键字"
        ></el-input>
        <!-- 工程设备树 -->
        <el-tree
          :data="edTree"
          :props="props"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          ref="tree"
        >
        </el-tree>
      </div>
      <div class="right">
        <div v-show="Historydata.list.length == 0" class="notice">
          请先选择工程下的设备
        </div>
        <div v-show="Historydata.list.length > 0">
          <!-- 选择时间区域 -->

          <div class="chosetime">
            <el-form :inline="true" size="small" class="demo-form-inline">
              <el-form-item>
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="timestamp"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="btn"
                  @click="toSearchHandler"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 表格区域 -->
          <div class="table">
            <el-table :data="Historydata.list" style="width: 100%">
              <el-table-column label="日期" width="150px" align="center">
                <template v-slot="{ row }">
                  <span>{{ row.insert_time | fmtTime }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="tsp"
                label="tsp"
                width="90px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="pm10"
                label="pm10"
                width="90px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="pm25"
                label="pm25"
                width="90px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="temperature"
                label="温度"
                width="90px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="humidity"
                label="湿度"
                width="90px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="wind_direction"
                label="风向"
                width="90px"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="wind_speed"
                label="风速"
                width="300px"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页区域 -->
          <el-pagination
            style="margin-top: 1em"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parseInt(Historydata.page)"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="parseInt(Historydata.pageSize)"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(Historydata.total)"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";

export default {
  data() {
    return {
      edTree: [],
      props: {
        label: "name",
        value: "id",
      },
      params: {
        page: 1,
        pageSize: 10,
      },
      filterText: "",
      value1: [],

      Historydata: {
        list: [],
      },
      keyWords: "",
    };
  },
  //监测搜索框的值是否变化
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    //模糊搜索
    filterNode(value, edTree) {
      if (!value) {
        return true;
      } else {
        return edTree.name.indexOf(value) !== -1;
      }
    },

    // 树形节点点击事件
    handleNodeClick(data, b, c) {
      console.log(data, b, c);
      if (data.engineer_id) {
        //console.log(data),
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.device_id,
        };

        //调用请求数据的方法
        this.queryHistoryData();
      }
    },
    // 查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
      });
    },
    // 搜索按钮点击事件
    toSearchHandler() {
      this.params = {
        ...this.params,
        begin_time: this.value1[0],
        end_time: this.value1[1],
      };
      this.queryHistoryData();
    },
    // pageSize改变事件
    handleSizeChange(pageSize) {
      // 将分页插件最新的参数赋值给params
      this.params.pageSize = pageSize;
      // 数据重载）
      this.queryHistoryData();
    },

    // page改变事件
    handleCurrentChange(page) {
      this.params.page = page;
      this.queryHistoryData();
    },

    //分页多条件查询设备数据信息
    queryHistoryData() {
      get("/monitor/pageQuery", this.params).then((res) => {
        this.Historydata = res.data;
      });
    },
  },

  created() {
    // 查询工程设备树
    this.findEngineerDeviceTree();
    // this.queryHistoryData();
  },
};
</script>
<style scoped>
.content {
  display: flex;
}
.chosetime {
  width: 100%;
}

.left {
  width: 20%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 80%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
.btn {
  margin-left: 20px;
}
.table {
  margin-top: 20px;
}
</style>